<app-common-bar (create)="create()" (refresh)="load()" (search)="search($event)" [loading]="loading"
                [(view)]="view"></app-common-bar>
<!--卡片视图-->
<div *ngIf="view=='card'">
  <nz-row [nzGutter]="[8,8]">
    <div nz-col [nzSpan]="12" [nzXs]="24" [nzSm]="12" [nzMd]="12" [nzLg]="8" [nzXl]="6" [nzXXl]="4"
         *ngFor="let data of datum; let i=index" >
      <nz-card (click)="open(data)" nzSize="small" nzHoverable [nzTitle]="'通道：'+data.id" [nzExtra]="extraTemplate">
        <p>{{data.name}} {{data.online ? '[在线]' : '[离线]'}}</p>
        <p>{{data.type}}
          <ng-container *ngIf="data.type=='serial'">{{data.serial.port}}</ng-container>
          <ng-container *ngIf="data.type!='serial'">{{data.addr}}</ng-container>
        </p>
      </nz-card>
      <ng-template #extraTemplate>
        <a nz-dropdown [nzDropdownMenu]="menu" nzTrigger="click" (click)="$event.stopPropagation()">
          更多
          <i nz-icon nzType="down"></i>
        </a>
        <nz-dropdown-menu #menu="nzDropdownMenu">
          <ul nz-menu>
            <li nz-menu-item>
              <a [routerLink]="'/admin/tunnel/detail/'+data.id">详情</a>
            </li>
            <li nz-menu-item>
              <a [routerLink]="'/admin/tunnel/edit/'+data.id">编辑</a>
            </li>
            <li nz-menu-item>
              <a [routerLink]="'/admin/tunnel/monitor/'+data.id">监控</a>
            </li>
            <li nz-menu-item [nzDisabled]="!data.disabled" (click)="enable(data)">启用</li>
            <li nz-menu-item [nzDisabled]="data.disabled" nz-popconfirm nzPopconfirmTitle="确定禁用？"
                (nzOnConfirm)="disable(data)">禁用
            </li>
            <li nz-menu-item nzDanger nz-popconfirm nzPopconfirmTitle="确定删除？" (nzOnConfirm)="remove(data, i)">删除</li>
          </ul>
        </nz-dropdown-menu>
      </ng-template>
    </div>
  </nz-row>

  <nz-empty *ngIf="!datum?.length" nzNotFoundImage="simple"></nz-empty>

  <nz-pagination nzSize="small" style="margin-top: 20px"
                 [nzPageSize]="pageSize"
                 [nzTotal]="total"
                 [nzPageIndex]="pageIndex"
                 (nzPageIndexChange)="onPageChange($event)"
  ></nz-pagination>
</div>

<!--列表视图-->
<nz-table *ngIf="view=='list'"
          nzSize="small"
          [nzData]="datum"
          [nzFrontPagination]="false"
          [nzLoading]="loading"
          [nzTotal]="total"
          [nzPageSize]="pageSize"
          [nzPageIndex]="pageIndex"
          (nzQueryParams)="onQuery($event)"
>
  <thead>
  <tr>
    <th nzColumnKey="id" [nzSortFn]="true">ID</th>
    <th nzColumnKey="server_id" [nzSortFn]="true">服务器</th>
    <th nzColumnKey="name" [nzSortFn]="true">名称</th>
    <th nzColumnKey="type" [nzSortFn]="true">类型</th>
    <th nzColumnKey="addr" [nzSortFn]="true">地址</th>
    <th nzColumnKey="created" [nzSortFn]="true">创建时间</th>
    <th nzColumnKey="last" [nzSortFn]="true">最近上线</th>
    <th>状态</th>
    <th nzWidth="100">操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of datum; let i=index" (dblclick)="open(data)">
    <td>{{ data.id }}</td>
    <td><a [routerLink]="'/admin/server/detail/'+data.server_id">{{ data.server }}</a></td>
    <td>{{data.disabled ? '❌' : ''}}{{ data.name }}</td>
    <td>{{ data.type }}</td>
    <td>
      <ng-container *ngIf="data.type=='serial'">{{data.serial.port}}</ng-container>
      <ng-container *ngIf="data.type!='serial'">{{data.addr}}</ng-container>
    </td>
    <td [title]="data.created|dateString">{{data.created | fromNow}}</td>
    <td>{{data.last | fromNow}}</td>
    <td>{{data.online ? '在线' : '离线'}}</td>
    <td>
      <a [routerLink]="'/admin/tunnel/detail/'+data.id">详情</a>
      <nz-divider nzType="vertical"></nz-divider>
      <a [routerLink]="'/admin/tunnel/edit/'+data.id">编辑</a>
      <nz-divider nzType="vertical"></nz-divider>
      <a nz-dropdown [nzDropdownMenu]="menu" nzTrigger="click">
        更多
        <i nz-icon nzType="down"></i>
      </a>
      <nz-dropdown-menu #menu="nzDropdownMenu">
        <ul nz-menu>
          <li nz-menu-item>
            <a [routerLink]="'/admin/tunnel/monitor/'+data.id">监控</a>
          </li>
          <li nz-menu-item [nzDisabled]="!data.disabled" (click)="enable(data)">启用</li>
          <li nz-menu-item [nzDisabled]="data.disabled" nz-popconfirm nzPopconfirmTitle="确定禁用？"
              (nzOnConfirm)="disable(data)">禁用
          </li>
          <li nz-menu-item nzDanger nz-popconfirm nzPopconfirmTitle="确定删除？" (nzOnConfirm)="remove(data, i)">删除</li>

        </ul>
      </nz-dropdown-menu>
    </td>
  </tr>
  </tbody>
</nz-table>

